<template>
  <div id="app1" class="main-content">
    <p>一、Vue环境安装配置</p>
    <pre class="code">
vue + npm + webpack
<a href="https://nodejs.org/zh-cn/download/">https://nodejs.org/zh-cn/download/</a>
webpack
<a href="https://www.cnblogs.com/-walker/p/6056529.html">https://www.cnblogs.com/-walker/p/6056529.html</a>
#查看当前node版本
node -v
#查看当前npm版本
npm -v
#安装cnpm，-g代表全局
npm install cnpm -g
#查看当前cnpm版本
cnpm -v
#全局安装webpack
npm install webpack -g
#安装依赖
npm install webpack-cli -g
#查看版本
webpack -v

#demo 初始化
vue init webpack my-project
cd my-project
#依赖
cnpm install
#运行
npm run dev
#打包
npm run build</pre>
    <p>二、Vue项目</p>
<pre class="code">
Vue版本2.x
项目结构
project_name
  //依赖
  node_modules
  src
    //资源目录
    assets
    //主件目录
    components
    //路由目录
    router
    //第一个模块
    App.vue
    //项目的入口，初始化模块，全局变量、工具等等
    main.js
  //输出
  static
  //测试
  test
</pre>
    <p>Vue视图都是通过new Vue({ })开始的</p>
<pre class="code">
//Vue初始位置写法1
import App from './App'
new Vue({
    el: '#root',
    template: '&lt;App&gt;&lt;/App&gt;',
    components: {
        App
    }
})
//Vue初始位置写法2
import App from './App'
new Vue({
    el: '#root',
    render: h => h(App)
})</pre>
    <p>三、Vue语法</p>
    <p>1. 常用的事件绑定v-on:</p>
<pre class="code" v-on:click="changeMessage">
通过修改message变量，直接修改视图，v-on:click绑定到js函数
点击改变数字：{{message}}
</pre>
    <p>2. 使用v-bind:[attributeName]="xx"绑定某个属性</p>
    <p>3. 条件渲染</p>
<pre class="code">
v-if
v-else
v-else-if
用于条件判断成立后才能使用某个接点
</pre>
    <p>4. 列表渲染</p>
    <p>使用v-for实现列表列表，需要结合列表标签使用</p>
    <div class="code" style="max-height: 200px; overflow: scroll">
      <p>输入字符将每个字符作为一个item显示</p>
      <input v-model="num" placeholder="输入字符">
      <ul>
        <li v-for="i in num">{{i}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  var number = 1;
  export default {
    name: 'vue1',
    data() {
      return {
        message: 'xxx',
        num:3
      }
    },
    methods: {
      changeMessage: function () {
        this.message = Math.round(Math.random() * 10000);
      }
    }
  }
</script>
